<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
import * as echarts from "echarts";
import { onMounted, inject, reactive, nextTick } from "vue";

const $axios = inject("$axios");
//不需要了
function openWindow() {
  window.open("https://bpmn.honqun.com/admin/#/yq/PlaceScanRec")
}

// 定义数据
const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
]);

// 获取数据
function getBackHomeCount() {
  $axios
    .get("/api/overview/grid")
    .then((res) => {
      console.log('网格', res)
      res.data.data.forEach((item) => {
        tableData.push(item);
      });
    })
    .then(nextTick)
    .then(() => {
      autoScroll();
    });
}

function autoScroll() {
  const el = document.querySelector(".red-yellow");
  const elHeight = el.offsetHeight;
  const sHeight = el.scrollHeight;
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++;
    } else {
      el.scrollTop = 0;
    }
  }, 50);
}
function getChartData(type) {
  $axios.get("hs_result/hsTimeStat", { params: { md: type } }).then((res) => {
    const xAxis = [];
    const data = [];
    res.data.data.forEach((item) => {
      xAxis.push(item.time);
      data.push(item.num);
    });
    option = {
      color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%",
        containLabel: true,
      },
      xAxis: [
        {
          nameTextStyle: {
            color: "#fff",
          },
          type: "category",
          boundaryGap: false,
          data: xAxis,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
        },
      ],
      yAxis: [
        {
          name: "单位:次",
          type: "value",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(219,225,255,1)",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,.5)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,.3)",
            },
          },
        },
      ],
      series: [
        {
          name: "Line 1",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 243, 183, 1)",
              },
              {
                offset: 1,
                color: "rgba(1, 241, 182, 0.1)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: data,
        },
      ],
    };

    option && myChart.setOption(option);

    window.addEventListener("resize", myChart.resize);
  });
}

var dom;
var myChart;
var option;

onMounted(() => {
  getBackHomeCount();
  // dom = document.getElementById("yellowRedChart");
  // myChart = echarts.init(dom, null, {
  //   renderer: "canvas",
  //   useDirtyRect: false,
  // });
  // getChartData("月");
});
</script>

<template>
  <MoniterItem title="网格信息" @timeUnitClicked="getChartData">
    <template #right>
        <a href="/admin/#/yq/Householder" style="color: #00f9ff;text-decoration: none;" target="_blank">更多》</a>
    </template>
    <template #content>
      <!-- <div style="height: 100%" id="yellowRedChart"></div> -->
      <div class="red-yellow" style="height: 90%; overflow: auto">
        <div class="red-yellow-item" v-for="(item, index) in tableData" :key="index">
          <div class="red-yellow-no">{{ index + 1 }}</div>
          <div class="red-yellow-content">
            <div class="red-yellow-content-item">
              <div class="red-yellow-top">
                <span>{{ item.town }}</span>
              </div>
              <div class="red-yellow-line line1"></div>
              <div class="red-yellow-bottom">乡镇名称</div>
            </div>
            <div class="red-yellow-content-item">
              <div class="red-yellow-top">
                <span style="color: #FFD200">{{ item.grids }}</span>
                <text>个</text>
              </div>
              <div class="red-yellow-line line2">
                <!-- <img src="@/assets/line2.png" /> -->
              </div>
              <div class="red-yellow-bottom">网格数量</div>
            </div>
            <div class="red-yellow-content-item">
              <div class="red-yellow-top">
                <span style="color: #FF8A00">{{ item.microGrids }}</span>
                <text>个</text>
              </div>
              <div class="red-yellow-line line3">
                <!-- <img src="@/assets/line3.png" /> -->
              </div>
              <div class="red-yellow-bottom">微网格数量</div>
            </div>
            <div class="red-yellow-content-item">
              <div class="red-yellow-top">
                <span style="color: #00EAFF">{{ item.managers }}</span>
                <text>人</text>
              </div>
              <div class="red-yellow-line line4">
                <!-- <img src="@/assets/line4.png" /> -->
              </div>
              <div class="red-yellow-bottom">网格员数</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>
<style lang="less" scoped>
.red-yellow {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.red-yellow-item {
  margin-top: 7px;
  width: 90%;
  height: 67px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;

  .red-yellow-no {
    font-size: 16px;
    margin-right: 21px;
  }

  .red-yellow-content {
    width: 75%;
    display: flex;
    justify-content: space-between;

    .red-yellow-content-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .red-yellow-top {
        font-size: 18px;
        line-height: 24px;
        color: #08FD77;

        text {
          font-size: 12px;
          color: #ffffff;
        }
      }

      .red-yellow-line {
        width: 74px;
        height: 11px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }

      .line1 {
        background-image: url('@/assets/line1.png');
      }

      .line2 {
        background-image: url('@/assets/line2.png');
      }

      .line3 {
        background-image: url('@/assets/line3.png');
      }

      .line4 {
        background-image: url('@/assets/line4.png');
      }

      .red-yellow-bottom {
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
}
</style>
